<template>
  <div class="index">
    <div class="house-day-clinch">
      <div class="header">2018年1月23日商房成交情况播报</div>
      <div class="search">
        <div>输入框</div>
        <div>按钮</div>
      </div>
      <div class="body">
        <el-table
          :data="staticData"
          border
          show-summary
          style="width: 100%">
          <el-table-column
            prop="area_name"
            label="城区">
          </el-table-column>
          <el-table-column
            prop="num"
            sortable
            label="套数">
          </el-table-column>
          <el-table-column
            prop="area"
            sortable
            label="面积（平方米）">
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="house-month-clinch">
      <div class="header">商品房本月累计成交情况</div>
      <div class="search">
        <div>输入框</div>
        <div>按钮</div>
      </div>
      <div class="body">
      <el-tabs type="border-card">
    <el-tab-pane label="总计"><el-table
          :data="staticData"
          border
          show-summary
          style="width: 100%">
          <el-table-column
            prop="area_name"
            label="城区">
          </el-table-column>
          <el-table-column
            prop="num"
            sortable
            label="套数">
          </el-table-column>
          <el-table-column
            prop="area"
            sortable
            label="面积（平方米）">
          </el-table-column>
        </el-table></el-tab-pane>
    <el-tab-pane label="商品住房"><el-table
          :data="staticData"
          border
          show-summary
          style="width: 100%">
          <el-table-column
            prop="area_name"
            label="城区">
          </el-table-column>
          <el-table-column
            prop="num"
            sortable
            label="套数">
          </el-table-column>
          <el-table-column
            prop="area"
            sortable
            label="面积（平方米）">
          </el-table-column>
        </el-table></el-tab-pane>
    <el-tab-pane label="经济适用房"><el-table
          :data="staticData"
          border
          show-summary
          style="width: 100%">
          <el-table-column
            prop="area_name"
            label="城区">
          </el-table-column>
          <el-table-column
            prop="num"
            sortable
            label="套数">
          </el-table-column>
          <el-table-column
            prop="area"
            sortable
            label="面积（平方米）">
          </el-table-column>
        </el-table></el-tab-pane>
    <el-tab-pane label="办公楼"><el-table
          :data="staticData"
          border
          show-summary
          style="width: 100%">
          <el-table-column
            prop="area_name"
            label="城区">
          </el-table-column>
          <el-table-column
            prop="num"
            sortable
            label="套数">
          </el-table-column>
          <el-table-column
            prop="area"
            sortable
            label="面积（平方米）">
          </el-table-column>
        </el-table></el-tab-pane>
    <el-tab-pane label="商业营业用房"><el-table
          :data="staticData"
          border
          show-summary
          style="width: 100%">
          <el-table-column
            prop="area_name"
            label="城区">
          </el-table-column>
          <el-table-column
            prop="num"
            sortable
            label="套数">
          </el-table-column>
          <el-table-column
            prop="area"
            sortable
            label="面积（平方米）">
          </el-table-column>
        </el-table></el-tab-pane>
    <el-tab-pane label="其他"><el-table
          :data="staticData"
          border
          show-summary
          style="width: 100%">
          <el-table-column
            prop="area_name"
            label="城区">
          </el-table-column>
          <el-table-column
            prop="num"
            sortable
            label="套数">
          </el-table-column>
          <el-table-column
            prop="area"
            sortable
            label="面积（平方米）">
          </el-table-column>
        </el-table></el-tab-pane>
    </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Index',
    data() {
      return {
        staticData: [
          {area_name:"青秀区",num:6,area:394},
        {area_name:"兴宁区",num:5,area:394},
        {area_name:"江南区",num:4,area:394},{area_name:"邕宁区",num:3,area:394},
        {area_name:"良庆区",num:2,area:394},{area_name:"西乡塘区",num:1,area:394},
        {area_name:"其它",num:6,area:394}],
      }
    },
    methods:{

    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .index{
    width: 100%;
    display: flex;
    flex-direction: row;
  }
  .house-day-clinch {
    background: #df3e3b;
    margin-left: 2%;
    width: 38%;
    height: 40px;
    line-height: 40px;
  }
  .header{
    text-align: left;
    color: #fff;
    font-family: "Microsoft YaHei";
    font-size: 16px;
    font-weight: bold;
    margin-left: 12px;
  }
  .search{
    display: flex;
    flex-direction: row;
  }
  .house-month-clinch {
    margin: 0 2% 0 5%;
    background: #df3e3b;
    width: 53%;
    height: 40px;
    line-height: 40px;
  }
</style>
